<template>
<section>
    <div class="custorm--modelbox graphicvideo-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
        <div class="es-form-item">
            <div class="form-label mb-20">视频类型</div>
            <el-radio-group v-model="custormItemData.params.videotype">
                <el-radio label="1">手动上传</el-radio>
                <el-radio label="2">视频链接</el-radio>
            </el-radio-group>
        </div>
        <div v-if="custormItemData.params.videotype == '2'" class="es-form-item">
            <div class="form-label mb-20">比例</div>
            <el-radio-group v-model="custormItemData.style.display">
                <el-radio label="1">16:9</el-radio>
                <el-radio label="2">4:3</el-radio>
                <el-radio label="3">1:1</el-radio>
            </el-radio-group>
        </div>
        <div v-if="custormItemData.params.videotype  == '2'" class="es-form-item">
            <div class="form-label mb-20">视频链接</div>
            <el-input v-model="custormItemData.params.videolink.file_path" size="small" placeholder="请输入第三方视频链接"></el-input>
        </div>
        <div v-if="custormItemData.params.videotype  == '1'" class="es-form-item">
            <div class="form-label mb-20">选择视频</div>
            <div class="uploadSource my-uploadSource" @click="uploadtoggle('video')" style="width: 80px;height: 80px;">
                <i v-if="!custormItemData.params.videolink.file_path" class="el-icon-plus" style="font-size: 36px;line-height:80px;"></i>
                <video style="width:100%;height:100%" alt="" v-if="custormItemData.params.videolink.file_path" :src="custormItemData.params.videolink.file_path"></video>
                <i v-if="custormItemData.params.videolink.file_path" class="el-icon-circle-close  my-close-light" @click.stop="delVideo"></i>
            </div>
        </div>
        <div class="es-form-item">
            <div class="form-label mb-20">选择封面图</div>
            <div class="img uploadSource" @click="uploadtoggle('image')" :style="{'background-image':`url(${getPath(custormItemData.params.videocover.file_path)})`,'width': '80px','height':'80px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}">
                <!-- <i class="el-icon-plus" style="font-size: 36px;line-height:80px;"></i> -->
            </div>
        </div>
    </div>
</section>
</template>

<script>
// import uploadModel from "../../components/upload";
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }

  },
  data() {
    return {

    }
  },
  components: {
    // uploadModel
  },
  methods: {
    uploadFileCallBack(files) {
      const { key, type: [file_type] } = files
      if (key === 'ChooseFiles') {
        const { displayData: [file_path] } = files
        if (file_path) {
          if (file_type === 'image') {
            this.custormItemData.params.videocover = file_path
          } else if (file_type === 'video') {
            this.custormItemData.params.videolink = file_path
          }
        }
      }
    },
    uploadtoggle(type) {
      this.output({ type: type, params: { editKey: this.custormItemData.key } })
    },
    delVideo() {
      this.custormItemData.params.videolink.file_path = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicvideo-edit {
    .my-uploadSource:hover .my-close-light {
        display: block;
    }

    .my-close-light {
        display: none;
        position: absolute;
        font-size: 16px;
        top: -8px;
        right: -8px;
        color: rgb(218, 217, 217);
        cursor: pointer;
    }
}
</style>
